<template>
  <div>
    <el-form :model="formData" label-width="80px" ref="form" :rules="rules">
      <el-form-item label="商品名称" prop="goods_name">
        <el-input v-model="formData.goods_name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品类目" prop="cate_id">
        <el-select v-model="formData.cate_id" placeholder="选择商品类目">
          <el-option v-for="(item,index) in cates" :key="index" :value="item.id" :label="item.title"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品价格" prop="goods_price">
        <el-input type="number" v-model="formData.goods_price" placeholder="请输入商品价格"></el-input>
      </el-form-item>
      <el-form-item label="商品主图" prop="images">
        <multiuploader v-model="formData.images" />
      </el-form-item>
      <el-form-item label="商品规格">
        <div v-for="(item,index) in specList" :key="index" class="spec">
          <div class="specname">{{item.spec_name}}</div>
          <div class="specvalue">
            <el-tag class="tag" closable v-for="(it,ind) in item.values" :key="ind" @close="handleClose(it)">{{it.spec_value}}</el-tag>
            <el-button @click="addValue(item.id)">规格值</el-button>
          </div>
        </div>
        <el-button @click="addSpec">添加规格</el-button>
      </el-form-item>
      
      <el-form-item label="规格明细">

      </el-form-item>      
      <el-form-item label="商品详情" prop="content">         
         <editor v-model="formData.content"/>
      </el-form-item>
      <el-form-item>  
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="选择规格" :visible.sync="specVisible" append-to-body>
      <spec @choose="chooseSpec" />
    </el-dialog>

    <el-dialog title="选择规格值" :visible.sync="valueVisible" append-to-body>
      <specvalue @choose="chooseValue" :specId="curSpecId" />
    </el-dialog>
  </div>
</template>

<script>
import {create} from "@/api/shop/goods"
import {all} from "@/api/shop/goodscate"
import {all as allspec} from "@/api/shop/spec"
import multiuploader from "@/components/Uploader/multiuploader"
import editor from "@/components/Editor/editor.vue"
import spec from "./spec.vue"
import specvalue from "./specvalue.vue"

  export default {
    components:{
      multiuploader,
      editor,
      spec,
      specvalue,
    },
    data(){
      return {
        formData:{
          goods_name:'',
          goods_price:'',
          images:[],
          content:'',
          cate_id:''
        },
        rules:{
          goods_name:[
            {required:true,message:'请输入商品名称'}
          ],
          goods_price:[
            {required:true,message:'请输入商品价格'}
          ],
          images:[
            {required:true,message:'请上传商品主图'}
          ],
          content:[
            {required:true,message:'请输入商品详情'}
          ]
        },
        cates:[],
        allSpec:[],
        specList:[
        //   {
        //   id:'1',
        //   spec_name:'测试',
        //   values:[]
        // }
        ],
        specVisible:false,
        valueVisible:false,
        curSpecId:'',
      }
    },
    created(){
      this.getCates();
      this.getAllSpec();
    },
    methods:{
      getCates(){
        all().then(res=>{
          this.cates = res;          
        })
      },
      getAllSpec(){
        allspec().then(res=>{
          this.allSpec = res;
        })
      },
      addSpec(){
        this.specVisible = true;
      },
      chooseSpec(row){
        console.log("choose",row);
        let isdublicate = false;
        //判断重复
        this.specList.forEach(item=>{
          if( row.id == item.id ){
             isdublicate = true;
          }
        })
        if(isdublicate) {
          this.$message.error('已经选择了');
          return;
        }
        this.specList.push({
          id:row.id,
          spec_name:row.spec_name,
          values:[]
        })
      },
      addValue(specId){
        this.valueVisible = true;
        this.curSpecId = specId;
      },
      chooseValue(row){
        this.specList.forEach(item=>{
          if(item.id == this.curSpecId){
            let isdublicate = false;
            item.values.forEach(i=>{
              if(i.id == row.id){
                isdublicate = true;
              }
            })
            if(isdublicate) {
              this.$message.error("已经选择了")
              return;
            }
            item.values.push({
              id:row.id,
              spec_value:row.spec_value
            })
          }          
        })
      },
      handleClose(e){
        console.log(e,'e')
      },
      submit(){          
        this.$refs.form.validate(valid=>{
          if(valid){
            create(this.formData).then(res=>{
              this.$emit('success')
              this.$message.success("新增商品成功")
            })
          }          
        })
      },
    }
  }
</script>

<style scoped>
.spec{  
  margin:5px 0px;
}
.spec .specname{
  background:#ddd;
  padding:5px;
}
.spec .specvalue{  
  padding:5px;
  background:#efefef;
}
.tag{
  margin-right:10px;
}
</style>